<template>
  <div class="box">
        <div class="header">
            <van-nav-bar
                title="添加地址"
                left-arrow
                @click-left="onClickLeft" />
      </div>
      <div class="content">
          <van-address-edit
            :area-list="areaList"
            show-postal
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @change-detail="onChangeDetail"
            />
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, AddressEdit, Toast, Area } from 'vant'
import { addAddress } from '@/api/order.js'
import { areaList } from '@vant/area-data'

Vue.use(NavBar)
Vue.use(AddressEdit)
Vue.use(Area)
export default {
  data () {
    return {
      areaList,
      userid: localStorage.getItem('userid'),
      searchResult: [],
      resList: {}
    }
  },
  // mounted () {
  //   console.log(areaList)
  //   console.log(areaList.city_list['110000'])
  // },
  methods: {
    onClickLeft () {
      this.$router.go(-2)
    },
    async onSave (content) {
      this.resList = content
      delete this.resList.postalCode
      delete this.resList.areaCode
      delete this.resList.country
      this.resList.userid = this.userid
      await addAddress(this.resList)
      this.$router.go(-2)
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style>

</style>
